<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Worklets Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ED" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="http://www.w3.org/TR/worklets-1/" rel="canonical">
<style>
/* Put nice boxes around each algorithm. */
[data-algorithm]:not(.heading) {
    padding: .5em;
    border: thin solid #ddd; border-radius: .5em;
    margin: .5em calc(-0.5em - 1px);
}
[data-algorithm]:not(.heading) > :first-child {
    margin-top: 0;
}
[data-algorithm]:not(.heading) > :last-child {
    margin-bottom: 0;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Worklets Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.css-houdini.org/worklets/">https://drafts.css-houdini.org/worklets/</a>
     <dt>Latest published version:
     <dd><a href="http://www.w3.org/TR/worklets-1/">http://www.w3.org/TR/worklets-1/</a>
     <dt>Previous Versions:
     <dd><a href="http://www.w3.org/TR/2016/WD-worklets-1-20160607/" rel="prev">http://www.w3.org/TR/2016/WD-worklets-1-20160607/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bworklets%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[worklets] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="73001"><a class="p-name fn u-email email" href="mailto:ikilpatrick@chromium.org">Ian Kilpatrick</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/css-houdini-drafts/labels/worklets-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification defines an API for running scripts in stages of the rendering pipeline independent of the main javascript execution environment.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/css-houdini-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “worklets” in the title,
	preferably like this:
	“[worklets] <i>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-houdini-archive/">archived</a>. </p>
   <p> This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="http://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#motivations"><span class="secno">1.1</span> <span class="content">Motivations</span></a>
      <li><a href="#code-idempotency"><span class="secno">1.2</span> <span class="content">Code Idempotency</span></a>
      <li><a href="#speculative-evaluation"><span class="secno">1.3</span> <span class="content">Speculative Evaluation</span></a>
     </ol>
    <li>
     <a href="#infrastructure"><span class="secno">2</span> <span class="content">Infrastructure</span></a>
     <ol class="toc">
      <li>
       <a href="#the-global-scope"><span class="secno">2.1</span> <span class="content">The Global Scope</span></a>
       <ol class="toc">
        <li><a href="#the-event-loop"><span class="secno">2.1.1</span> <span class="content">The event loop</span></a>
        <li><a href="#creating-a-workletglobalscope"><span class="secno">2.1.2</span> <span class="content">Creating a WorkletGlobalScope</span></a>
        <li><a href="#script-settings-for-worklets"><span class="secno">2.1.3</span> <span class="content">Script settings for worklets</span></a>
       </ol>
      <li><a href="#worklet-section"><span class="secno">2.2</span> <span class="content">Worklet</span></a>
      <li><a href="#lifetime-of-the-worklet"><span class="secno">2.3</span> <span class="content">Lifetime of the Worklet</span></a>
     </ol>
    <li><a href="#security-considerations"><span class="secno">3</span> <span class="content">Security Considerations</span></a>
    <li>
     <a href="#examples"><span class="secno">4</span> <span class="content">Examples</span></a>
     <ol class="toc">
      <li><a href="#example-single"><span class="secno">4.1</span> <span class="content">Loading scripts into a worklet.</span></a>
      <li><a href="#example-multiple"><span class="secno">4.2</span> <span class="content">Loading scripts into multiple worklets.</span></a>
      <li><a href="#example-class"><span class="secno">4.3</span> <span class="content">Create a registered class and invoke a method.</span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <h3 class="heading settled" data-level="1.1" id="motivations"><span class="secno">1.1. </span><span class="content">Motivations</span><a class="self-link" href="#motivations"></a></h3>
   <p><em>This section is not normative.</em></p>
   <p>Allowing extension points defined in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#document-environment" id="ref-for-document-environment">document environment</a> is difficult, as rendering
engines would need to abandon previously held assumptions for what could happen in the middle of a
phase.</p>
   <p>For example, during the layout phase the rendering engine assumes that no DOM will be modified.</p>
   <p>Additionally defining extension points in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#document-environment" id="ref-for-document-environment①">document environment</a> would restrict rendering
engines to performing work in the same thread as the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#document-environment" id="ref-for-document-environment②">document environment</a>. (Unless rendering
engines added complex, high-overhead infrastructure to allow thread-safe APIs in addition to thread
joining guarantees).</p>
   <p>The worklet is designed to allow such extension points in rendering engines, while keeping
guarantees which rendering engines rely currently on.</p>
   <p>Worklets are similar to <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/workers.html#workers" id="ref-for-workers">web workers</a> however they:</p>
   <ul>
    <li data-md>
     <p>Are thread-agnostic. That is, they are not defined to run on a particular thread. Rendering
engines may run them wherever they choose.</p>
    <li data-md>
     <p>Are able to have multiple duplicate instances of the global scope created for the purpose of
parallelism.</p>
    <li data-md>
     <p>Are not event API based. Instead classes are registered on the global scope, whose methods are to
be invoked by the user agent.</p>
    <li data-md>
     <p>Have a reduced API surface on the global scope.</p>
    <li data-md>
     <p>Have a lifetime for the global scope which is defined by subsequent specifications or user
agents. They aren’t tied to the lifetime of the document.</p>
   </ul>
   <p>As worklets have a relatively high overhead, they should be used sparingly. Due to this worklets are
expected to be shared between separate scripts. This is similar to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#document-environment" id="ref-for-document-environment③">document environment</a>.</p>
   <h3 class="heading settled" data-level="1.2" id="code-idempotency"><span class="secno">1.2. </span><span class="content">Code Idempotency</span><a class="self-link" href="#code-idempotency"></a></h3>
   <p>Some specifications which use worklets (<a data-link-type="biblio" href="#biblio-css-paint-api-1">[css-paint-api-1]</a>), allow user agents to parallelize work
over multiple threads, or to move work between threads as required.</p>
   <p>In these specifications user agents might invoke methods on a class in a different order to other
user agents.</p>
   <p>As a result of this, to prevent this compatibility risk between user agents, authors who register
classes on the global scope using these APIs, should make their code idempotent. That is, a method
or set of methods on a class should produce the same output given a particular input.</p>
   <p>The following techniques are used in order to encourage authors to write code in an idempotent way:</p>
   <ul>
    <li data-md>
     <p>No reference to the global object, e.g. <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/workers.html#dom-workerglobalscope-self" id="ref-for-dom-workerglobalscope-self">self</a> on a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope" id="ref-for-dedicatedworkerglobalscope">DedicatedWorkerGlobalScope</a></code>.</p>
    <li data-md>
     <p>Code is loaded as a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#module-script" id="ref-for-module-script">module script</a> which resulting in the code being executed in <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-code" id="ref-for-sec-strict-mode-code">strict
 mode code</a> without a shared this. This prevents two different module scripts sharing
 state by referencing shared objects on the global scope.</p>
    <li data-md>
     <p>These specifications must require user agents to always have at least two <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope">WorkletGlobalScope</a></code>s
 per <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet">Worklet</a></code> and randomly assign a method or set of methods on a class to a particular
 global scope. These specifications can provide an opt-out under memory constraints.</p>
    <li data-md>
     <p>User agents can create and destroy <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①">WorkletGlobalScope</a></code>s at any time for these specifications.</p>
   </ul>
   <h3 class="heading settled" data-level="1.3" id="speculative-evaluation"><span class="secno">1.3. </span><span class="content">Speculative Evaluation</span><a class="self-link" href="#speculative-evaluation"></a></h3>
   <p>Some specifications which use worklets (<a data-link-type="biblio" href="#biblio-css-paint-api-1">[css-paint-api-1]</a>) may invoke methods on a class based on
the state of the user agent. To increase the concurrency between threads, a user agent may invoke a
method speculatively, based on potential future states.</p>
   <p>In these specifications user agents might invoke methods on a class at any time, and with any
arguments, not just ones corresponding to the current state of the user agent. The results of such
speculative evaluations are not displayed immediately, but may be cached for use if the user agent
state matches the speculated state.  This may increase the concurrency between the user agent and
worklet threads.</p>
   <p>As a result of this, to prevent this compatibility risk between user agents, authors who register
classes on the global scope using these APIs, should make their code stateless. That is, the only
effect of invoking a method should be its result, not any side-effects such as updating mutable
state.</p>
   <p>The same techniques which encourage code idempotence also encourage authors to write stateless code.</p>
   <h2 class="heading settled" data-level="2" id="infrastructure"><span class="secno">2. </span><span class="content">Infrastructure</span><a class="self-link" href="#infrastructure"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="the-global-scope"><span class="secno">2.1. </span><span class="content">The Global Scope</span><a class="self-link" href="#the-global-scope"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②">WorkletGlobalScope</a></code> object provides a <dfn data-dfn-type="dfn" data-noexport id="worklet-global-scope">worklet global scope<a class="self-link" href="#worklet-global-scope"></a></dfn> which represents the
global execution context of a <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet①">Worklet</a></code>.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Worklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="workletglobalscope"><code><c- g>WorkletGlobalScope</c-></code></dfn> {
};
</pre>
   <p>Each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope③">WorkletGlobalScope</a></code> has an assocated <dfn class="dfn-paneled" data-dfn-for="WorkletGlobalScope" data-dfn-type="dfn" data-export data-lt="owner document" id="workletglobalscope-owner-document">owner
document</dfn>.
It is initially null and set inside the <a data-link-type="dfn" href="#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope">create a WorkletGlobalScope</a> algorithm.</p>
   <p>Whenever a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/infrastructure.html#dom-document" id="ref-for-dom-document">Document</a></code> object is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#a-browsing-context-is-discarded" id="ref-for-a-browsing-context-is-discarded">discarded</a>, each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope④">WorkletGlobalScope</a></code> whose <a data-link-type="dfn" href="#workletglobalscope-owner-document" id="ref-for-workletglobalscope-owner-document">owner
document</a> is that <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/infrastructure.html#dom-document" id="ref-for-dom-document①">Document</a></code> object, should clear its <a data-link-type="dfn" href="#workletglobalscope-owner-document" id="ref-for-workletglobalscope-owner-document①">owner document</a>.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope⑤">WorkletGlobalScope</a></code> has an associated <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object" id="ref-for-environment-settings-object">environment settings object</a>.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope⑥">WorkletGlobalScope</a></code> has an associated <dfn class="dfn-paneled" data-dfn-for="WorkletGlobalScope" data-dfn-type="dfn" data-noexport id="workletglobalscope-module-map">module map</dfn>. It is a <a data-link-type="dfn" href="#workletglobalscope-module-map" id="ref-for-workletglobalscope-module-map">module map</a>, initially empty.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope⑦">WorkletGlobalScope</a></code> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="worklet-global-scope-execution-environment">worklet global scope execution environment</dfn>. This
execution environment may be parallel (i.e. it may be on a separate thread, process, or other
equivalent construct), or it may live on the same thread or process as the <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet②">Worklet</a></code> object it
belongs to. Which thread or process it lives on is decided by the user agent.</p>
   <p class="note" role="note"><span>Note:</span> The <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope⑧">WorkletGlobalScope</a></code> has a limited global scope when compared to a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope" id="ref-for-dedicatedworkerglobalscope①">DedicatedWorkerGlobalScope</a></code>. It is expected that other specifications will extend <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope⑨">WorkletGlobalScope</a></code> with <code class="lang-javascript highlight">registerAClass</code> methods which
    will allow authors to register classes for the user agent create and invoke methods on.</p>
   <p>When asked to <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception" id="ref-for-report-the-exception">report an exception</a>, do nothing instead, or optionally report the exception to
a developer console.</p>
   <p class="issue" id="issue-b929d849"><a class="self-link" href="#issue-b929d849"></a> HTML’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception" id="ref-for-report-the-exception①">report an exception</a> needs updating to work with
    non-EventTarget global objects. <a href="https://github.com/whatwg/html/issues/2611">&lt;https://github.com/whatwg/html/issues/2611></a></p>
   <h4 class="heading settled" data-level="2.1.1" id="the-event-loop"><span class="secno">2.1.1. </span><span class="content">The event loop</span><a class="self-link" href="#the-event-loop"></a></h4>
   <p>Each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①⓪">WorkletGlobalScope</a></code> object has a distinct <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop">event loop</a>. This <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop①">event loop</a> has no
associated <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context">browsing context</a>. The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop②">event loop</a> is created by the <a data-link-type="dfn" href="#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope①">create a
WorkletGlobalScope</a> algorithm.</p>
   <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop③">event loop</a> is run on the <a data-link-type="dfn" href="#worklet-global-scope-execution-environment" id="ref-for-worklet-global-scope-execution-environment">worklet global scope execution environment</a> defined above.</p>
   <p>It is expected that only tasks associated <code class="idl"><a data-link-type="idl" href="#dom-worklet-addmodule" id="ref-for-dom-worklet-addmodule">addModule()</a></code>, the user agent invoking author
defined callbacks, and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#microtask" id="ref-for-microtask">microtasks</a> will use this <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop④">event loop</a>.</p>
   <p class="note" role="note"><span>Note:</span> Even through the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model">event loop processing model</a> specifies that it loops continually,
    practically implementations aren’t expected to do this. The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#microtask-queue" id="ref-for-microtask-queue">microtask queue</a> is emptied
    while <a data-link-type="dfn" href="http://heycam.github.io/webidl/#es-invoking-callback-functions" id="ref-for-es-invoking-callback-functions">invoking callback functions</a> provided by the author.</p>
   <h4 class="heading settled" data-level="2.1.2" id="creating-a-workletglobalscope"><span class="secno">2.1.2. </span><span class="content">Creating a WorkletGlobalScope</span><a class="self-link" href="#creating-a-workletglobalscope"></a></h4>
   <div class="algorithm" data-algorithm="create a WorkletGlobalScope">
     When a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="create-a-workletglobalscope">create a WorkletGlobalScope</dfn>, given <var>workletGlobalScopeType</var>, <var>moduleResponsesMap</var>, and <var>outsideSettings</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Create the <a data-link-type="dfn" href="#worklet-global-scope-execution-environment" id="ref-for-worklet-global-scope-execution-environment①">worklet global scope execution environment</a> and run the rest of these steps
in that context.</p>
     <li data-md>
      <p>Call the JavaScript <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-initializehostdefinedrealm" id="ref-for-sec-initializehostdefinedrealm">InitializeHostDefinedRealm</a> abstract operation with the following
customizations:</p>
      <ul>
       <li data-md>
        <p>For the global object, create a new <var>workletGlobalScopeType</var> object. Let <var>workletGlobalScope</var> be the created object.</p>
       <li data-md>
        <p>Let <var>realmExecutionContext</var> be the created JavaScript execution context.</p>
      </ul>
     <li data-md>
      <p>Let <var>insideSettings</var> be the result of <a data-link-type="dfn" href="#set-up-a-worklet-environment-settings-object" id="ref-for-set-up-a-worklet-environment-settings-object">set up a worklet environment settings object</a> given <var>realmExecutionContext</var>, and <var>outsideSettings</var>.</p>
     <li data-md>
      <p>Associate the <var>insideSettings</var> with <var>workletGlobalScope</var>.</p>
     <li data-md>
      <p>Set <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#workletglobalscope-owner-document" id="ref-for-workletglobalscope-owner-document②">owner document</a> to <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document" id="ref-for-responsible-document">responsible
document</a>.</p>
     <li data-md>
      <p>Invoke the <a data-link-type="dfn" href="https://w3c.github.io/webappsec-csp/#initialize-global-object-csp" id="ref-for-initialize-global-object-csp">initialize a global object’s CSP list</a> algorithm given <var>workletGlobalScope</var>.</p>
     <li data-md>
      <p>For each <var>entry</var> in the given <var>moduleResponsesMap</var> (in insertion order), run the following
substeps:</p>
      <ol>
       <li data-md>
        <p>Let <var>moduleURLRecord</var> be <var>entry</var>’s key.</p>
       <li data-md>
        <p>Let <var>script</var> be the result of <a data-link-type="dfn" href="#fetch-a-worklet-script" id="ref-for-fetch-a-worklet-script">fetch a worklet script</a> given <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>outsideSettings</var>, and <var>insideSettings</var> when
it asynchronously completes.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#run-a-module-script" id="ref-for-run-a-module-script">Run a module script</a> given <var>script</var>.</p>
      </ol>
      <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#fetch-a-worklet-script" id="ref-for-fetch-a-worklet-script①">Fetch a worklet script</a> won’t actually perform a network request as it will hit
    the worklet’s <a data-link-type="dfn" href="#module-responses-map" id="ref-for-module-responses-map">module responses map</a>. It also won’t have a parsing error as at this
    point it should have successfully been parsed by another worklet global scope. I.e. <var>script</var> should never be null here.</p>
     <li data-md>
      <p>Run the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop" id="ref-for-responsible-event-loop">responsible event loop</a> specified by <var>insideSettings</var>.</p>
    </ol>
   </div>
   <h4 class="heading settled" data-level="2.1.3" id="script-settings-for-worklets"><span class="secno">2.1.3. </span><span class="content">Script settings for worklets</span><a class="self-link" href="#script-settings-for-worklets"></a></h4>
   <div class="algorithm" data-algorithm="set up a worklet environment settings object">
     When a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="set-up-a-worklet-environment-settings-object">set up a worklet environment settings object</dfn>, given a <var>executionContext</var>, and <var>outsideSettings</var>, it must run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>inheritedResponsibleBrowsingContext</var> be <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context">responsible browsing
context</a>.</p>
     <li data-md>
      <p>Let <var>inheritedAPIBaseURL</var> be <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url" id="ref-for-api-base-url">API base URL</a>.</p>
     <li data-md>
      <p>Let <var>origin</var> be a unique <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin-opaque" id="ref-for-concept-origin-opaque">opaque origin</a>.</p>
     <li data-md>
      <p>Let <var>inheritedHTTPSState</var> be <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#https-state" id="ref-for-https-state">HTTPS state</a>.</p>
     <li data-md>
      <p>Let <var>inheritedReferrerPolicy</var> be <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-referrer-policy" id="ref-for-concept-settings-object-referrer-policy">referrer policy</a>.</p>
     <li data-md>
      <p>Let <var>workletEventLoop</var> be a newly created <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop⑤">event loop</a>.</p>
     <li data-md>
      <p>Let <var>realm</var> be the value of <var>executionContext</var>’s Realm component.</p>
     <li data-md>
      <p>Let <var>workletGlobalScope</var> be <var>realm</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-global" id="ref-for-concept-settings-object-global">global object</a>.</p>
     <li data-md>
      <p>Let <var>settingsObject</var> be a new <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object" id="ref-for-environment-settings-object①">environment settings object</a> whose algorithms are defined
as follows:</p>
      <dl>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#realm-execution-context" id="ref-for-realm-execution-context">realm execution context</a>
       <dd data-md>
        <p>Return <var>executionContext</var>.</p>
       <dt data-md>The <a data-link-type="dfn" href="#workletglobalscope-module-map" id="ref-for-workletglobalscope-module-map①">module map</a>.
       <dd data-md>
        <p>Return <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#workletglobalscope-module-map" id="ref-for-workletglobalscope-module-map②">module map</a>.</p>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context①">responsible browsing context</a>
       <dd data-md>
        <p>Return <var>inheritedResponsibleBrowsingContext</var>.</p>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop" id="ref-for-responsible-event-loop①">responsible event loop</a>
       <dd data-md>
        <p>Return <var>workletEventLoop</var>.</p>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document" id="ref-for-responsible-document①">responsible document</a>
       <dd data-md>
        <p>Not applicable (the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop" id="ref-for-responsible-event-loop②">responsible event loop</a> is not a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context①">browsing context</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop⑥">event loop</a>).</p>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#api-url-character-encoding" id="ref-for-api-url-character-encoding">API URL character encoding</a>
       <dd data-md>
        <p>Return <a data-link-type="dfn" href="https://encoding.spec.whatwg.org/#utf-8" id="ref-for-utf-8">UTF-8</a>.</p>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url" id="ref-for-api-base-url①">API base URL</a>
       <dd data-md>
        <p>Return <var>inheritedAPIBaseURL</var>.</p>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin">origin</a>
       <dd data-md>
        <p>Return <var>origin</var>.</p>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#https-state" id="ref-for-https-state①">HTTPS state</a>
       <dd data-md>
        <p>Return <var>inheritedHTTPSState</var>.</p>
       <dt data-md>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-referrer-policy" id="ref-for-concept-settings-object-referrer-policy①">referrer policy</a>
       <dd data-md>
        <p>Return <var>inheritedReferrerPolicy</var>.</p>
      </dl>
     <li data-md>
      <p>Set <var>settingsObject</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-id" id="ref-for-concept-environment-id">id</a> to a new unique opaque string, <var>settingsObject</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-creation-url" id="ref-for-concept-environment-creation-url">creation URL</a> to <var>inheritedAPIBaseURL</var>, <var>settingsObject</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-target-browsing-context" id="ref-for-concept-environment-target-browsing-context">target browsing
context</a> to null, and <var>settingsObject</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-active-service-worker" id="ref-for-concept-environment-active-service-worker">active service worker</a> to null.</p>
     <li data-md>
      <p>Set <var>realm</var>’s [[HostDefined]] field to <var>settingsObject</var>.</p>
     <li data-md>
      <p>Return <var>settingsObject</var>.</p>
    </ol>
   </div>
   <p class="issue" id="issue-a1972cc8"><a class="self-link" href="#issue-a1972cc8"></a> Merge this with https://html.spec.whatwg.org/multipage/workers.html#set-up-a-worker-environment-settings-object</p>
   <h3 class="heading settled" data-level="2.2" id="worklet-section"><span class="secno">2.2. </span><span class="content">Worklet</span><a class="self-link" href="#worklet-section"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet③">Worklet</a></code> object provides the capability to add module scripts into its associated <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①①">WorkletGlobalScope</a></code>s. The user agent can then create classes registered on the <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①②">WorkletGlobalScope</a></code>s and invoke their methods.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="worklet"><code><c- g>Worklet</c-></code></dfn> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject"><c- g>NewObject</c-></a>] <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-worklet-addmodule" id="ref-for-dom-worklet-addmodule①"><c- g>addModule</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString"><c- b>USVString</c-></a> <dfn class="idl-code" data-dfn-for="Worklet/addModule(moduleURL, options), Worklet/addModule(moduleURL)" data-dfn-type="argument" data-export id="dom-worklet-addmodule-moduleurl-options-moduleurl"><code><c- g>moduleURL</c-></code><a class="self-link" href="#dom-worklet-addmodule-moduleurl-options-moduleurl"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-workletoptions" id="ref-for-dictdef-workletoptions"><c- n>WorkletOptions</c-></a> <dfn class="idl-code" data-dfn-for="Worklet/addModule(moduleURL, options), Worklet/addModule(moduleURL)" data-dfn-type="argument" data-export id="dom-worklet-addmodule-moduleurl-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-worklet-addmodule-moduleurl-options-options"></a></dfn>);
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-workletoptions"><code><c- g>WorkletOptions</c-></code></dfn> {
    <a class="n" data-link-type="idl-name" href="https://fetch.spec.whatwg.org/#requestcredentials" id="ref-for-requestcredentials"><c- n>RequestCredentials</c-></a> <dfn class="dfn-paneled idl-code" data-default="&quot;same-origin&quot;" data-dfn-for="WorkletOptions" data-dfn-type="dict-member" data-export data-type="RequestCredentials " id="dom-workletoptions-credentials"><code><c- g>credentials</c-></code></dfn> = "same-origin";
};
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet④">Worklet</a></code> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="worklet-global-scope-type">worklet global scope type</dfn>. This is used for creating new <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①③">WorkletGlobalScope</a></code> and the type must <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-inherit" id="ref-for-dfn-inherit">inherit</a> from <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①④">WorkletGlobalScope</a></code>.</p>
   <p class="note" role="note"><span>Note:</span> As an example the <a data-link-type="dfn" href="#worklet-global-scope-type" id="ref-for-worklet-global-scope-type">worklet global scope type</a> might be a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-paint-api-1/#paintworkletglobalscope" id="ref-for-paintworkletglobalscope">PaintWorkletGlobalScope</a></code>.</p>
   <p>A <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet⑤">Worklet</a></code> has a list of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="worklets-workletglobalscopes">worklet’s WorkletGlobalScopes</dfn>. Initially this list
is empty; it is populated when the user agent chooses to create its <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①⑤">WorkletGlobalScope</a></code>.</p>
   <p>A <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet⑥">Worklet</a></code> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="module-responses-map">module responses map</dfn>. This is a ordered map of module URLs to values
that are a <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch">fetch</a> responses. The map’s entries are ordered based on their insertion order.
Access to this map should be thread-safe.</p>
   <p>The <a data-link-type="dfn" href="#module-responses-map" id="ref-for-module-responses-map①">module responses map</a> exists to ensure that <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①⑥">WorkletGlobalScope</a></code>s created at different
times contain the same set of script source text and have the same behaviour. The creation of
additional <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①⑦">WorkletGlobalScope</a></code>s should be transparent to the author.</p>
   <div class="note" role="note">
     Practically user agents aren’t expected to implement the following algorithm using a
    thread-safe map. Instead when <code class="idl"><a data-link-type="idl" href="#dom-worklet-addmodule" id="ref-for-dom-worklet-addmodule②">addModule()</a></code> is called user agents can fetch the module
    graph on the main thread, and send the fetched sources (the data contained in the <a data-link-type="dfn" href="#module-responses-map" id="ref-for-module-responses-map②">module
    responses map</a>) to each thread which has a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①⑧">WorkletGlobalScope</a></code>. 
    <p>If the user agent wishes to create a new <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope①⑨">WorkletGlobalScope</a></code> it can simply sent the list of
    all fetched sources from the main thread to the thread which owns the <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②⓪">WorkletGlobalScope</a></code>.</p>
   </div>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-tasks-struct">pending tasks struct</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct">struct</a> consisting of:</p>
   <ul>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-for="pending tasks struct" data-dfn-type="dfn" data-noexport id="pending-tasks-struct-counter">counter</dfn>.</p>
   </ul>
   This is used by the algorithms below. 
   <div class="algorithm" data-algorithm="addModule(moduleURL, options)">
     When the <dfn class="dfn-paneled idl-code" data-dfn-for="Worklet" data-dfn-type="method" data-export data-lt="addModule(moduleURL, options)|addModule(moduleURL)" id="dom-worklet-addmodule"><code>addModule(<var>moduleURL</var>, <var>options</var>)</code></dfn> method is called on a <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet⑦">Worklet</a></code> object, the user agent <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>promise</var> be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise">a new promise</a>.</p>
     <li data-md>
      <p>Let <var>worklet</var> be this <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet⑧">Worklet</a></code>.</p>
     <li data-md>
      <p>Let <var>outsideSettings</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object">relevant settings object</a> of <b>this</b>.</p>
     <li data-md>
      <p>Let <var>moduleURLRecord</var> be the result of <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">parsing</a> the <var>moduleURL</var> argument relative to <var>outsideSettings</var>.</p>
     <li data-md>
      <p>If <var>moduleURLRecord</var> is failure, then reject promise with a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror">SyntaxError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> and return <var>promise</var>.</p>
     <li data-md>
      <p>Return <var>promise</var>, and then continue running this algorithm <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>.</p>
     <li data-md>
      <p>Let <var>credentialOptions</var> be the <code class="idl"><a data-link-type="idl" href="#dom-workletoptions-credentials" id="ref-for-dom-workletoptions-credentials">credentials</a></code> member of <var>options</var>.</p>
     <li data-md>
      <p>Let <var>moduleResponsesMap</var> be <var>worklet</var>’s <a data-link-type="dfn" href="#module-responses-map" id="ref-for-module-responses-map③">module responses map</a>.</p>
     <li data-md>
      <p>Let <var>workletGlobalScopeType</var> be <var>worklet</var>’s <a data-link-type="dfn" href="#worklet-global-scope-type" id="ref-for-worklet-global-scope-type①">worklet global scope type</a>.</p>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes">worklet’s WorkletGlobalScopes</a> is empty, run the following steps:</p>
      <ol>
       <li data-md>
        <p><a data-link-type="dfn" href="#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope②">Create a WorkletGlobalScope</a> given <var>workletGlobalScopeType</var>, <var>moduleResponsesMap</var>,
and <var>outsideSettings</var>.</p>
       <li data-md>
        <p>Add the <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②①">WorkletGlobalScope</a></code> to <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes①">worklet’s WorkletGlobalScopes</a>.</p>
      </ol>
      <p>Depending on the type of worklet the user agent may create additional <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②②">WorkletGlobalScope</a></code>s at this time.</p>
      <p class="note" role="note"><span>Note:</span> Specifically the <a data-link-type="biblio" href="#biblio-css-paint-api-1">[css-paint-api-1]</a> allows for multiple global scopes, while the <a data-link-type="biblio" href="#biblio-webaudio">[webaudio]</a> API does not.</p>
      <p>Wait for this step to complete before continuing.</p>
     <li data-md>
      <p>Let <var>pendingTaskStruct</var> be a new <a data-link-type="dfn" href="#pending-tasks-struct" id="ref-for-pending-tasks-struct">pending tasks struct</a> with <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter">counter</a> initialized to the length of <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes②">worklet’s
WorkletGlobalScopes</a>.</p>
     <li data-md>
      <p>For each <var>workletGlobalScope</var> in the <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes③">worklet’s WorkletGlobalScopes</a>, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">queue a
task</a> on the <var>workletGlobalScope</var> to <a data-link-type="dfn" href="#fetch-and-invoke-a-worklet-script" id="ref-for-fetch-and-invoke-a-worklet-script">fetch and invoke a worklet script</a> given <var>workletGlobalScope</var>, <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>credentialOptions</var>, <var>outsideSettings</var>, <var>pendingTaskStruct</var>, and <var>promise</var>.</p>
    </ol>
    <p class="note" role="note"><span>Note:</span> The rejecting and resolving of the <var>promise</var> occurs within the <a data-link-type="dfn" href="#fetch-and-invoke-a-worklet-script" id="ref-for-fetch-and-invoke-a-worklet-script①">fetch and invoke a
        worklet script</a> algorithm.</p>
   </div>
   <div class="algorithm" data-algorithm="fetch and invoke a worklet script">
     When the user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fetch-and-invoke-a-worklet-script">fetch and invoke a worklet script</dfn> given <var>workletGlobalScope</var>, <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>credentialOptions</var>, <var>outsideSettings</var>, <var>pendingTaskStruct</var>, and <var>promise</var>, the user agent <em>must</em> run the following steps: 
    <p class="note" role="note"><span>Note:</span> This algorithm is to be run within the <a data-link-type="dfn" href="#worklet-global-scope-execution-environment" id="ref-for-worklet-global-scope-execution-environment②">worklet global scope execution environment</a>.</p>
    <ol>
     <li data-md>
      <p>Let <var>insideSettings</var> be the <var>workletGlobalScope</var>’s associated <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object" id="ref-for-environment-settings-object②">environment settings
object</a>.</p>
     <li data-md>
      <p>Let <var>script</var> by the result of <a data-link-type="dfn" href="#fetch-a-worklet-script" id="ref-for-fetch-a-worklet-script②">fetch a worklet script</a> given <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>credentialOptions</var>, <var>outsideSettings</var>, and <var>insideSettings</var> when it
asynchronously completes.</p>
     <li data-md>
      <p>If <var>script</var> is null, then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">queue a task</a> on <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop" id="ref-for-responsible-event-loop③">responsible event
loop</a> to run these steps:</p>
      <ol>
       <li data-md>
        <p>If <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter①">counter</a> is not <b>-1</b>, then
run these steps:</p>
        <ol>
         <li data-md>
          <p>Set <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter②">counter</a> to <b>-1</b>.</p>
         <li data-md>
          <p>Reject <var>promise</var> with an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#aborterror" id="ref-for-aborterror">AbortError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code>.</p>
        </ol>
      </ol>
     <li data-md>
      <p>If <var>script</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-script-error-to-rethrow" id="ref-for-concept-script-error-to-rethrow">error to rethrow</a> is not null, then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">queue a task</a> on <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop" id="ref-for-responsible-event-loop④">responsible event loop</a> given <var>script</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-script-error-to-rethrow" id="ref-for-concept-script-error-to-rethrow①">error to rethrow</a> to run these steps:</p>
      <ol>
       <li data-md>
        <p>If <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter③">counter</a> is not <b>-1</b>, then
run these steps:</p>
        <ol>
         <li data-md>
          <p>Set <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter④">counter</a> to <b>-1</b>.</p>
         <li data-md>
          <p>Reject <var>promise</var> with <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-script-error-to-rethrow" id="ref-for-concept-script-error-to-rethrow②">error to rethrow</a>.</p>
        </ol>
      </ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#run-a-module-script" id="ref-for-run-a-module-script①">Run a module script</a> given <var>script</var>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task③">Queue a task</a> on <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop" id="ref-for-responsible-event-loop⑤">responsible event loop</a> to run these steps:</p>
      <ol>
       <li data-md>
        <p>If <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter⑤">counter</a> is not <b>-1</b>, then
run these steps:</p>
        <ol>
         <li data-md>
          <p>Decrement <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter⑥">counter</a> by <b>1</b>.</p>
         <li data-md>
          <p>If <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter⑦">counter</a> is <b>0</b>, then
resolve <var>promise</var>.</p>
        </ol>
      </ol>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="fetch a worklet script">
     When the user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fetch-a-worklet-script">fetch a worklet script</dfn> given <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>credentialOptions</var>, <var>outsideSettings</var>, and <var>insideSettings</var>, the user agent <em>must</em> run the following steps: 
    <p class="note" role="note"><span>Note:</span> This algorithm is to be run within the <a data-link-type="dfn" href="#worklet-global-scope-execution-environment" id="ref-for-worklet-global-scope-execution-environment③">worklet global scope execution environment</a>.</p>
    <ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-module-worker-script-tree" id="ref-for-fetch-a-module-worker-script-tree">Fetch a module worker script graph</a> given <var>moduleURLRecord</var>, <var>outsideSettings</var>, "script", <var>credentialOptions</var>, and <var>insideSettings</var>.</p>
      <p>To <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#fetching-scripts-perform-fetch" id="ref-for-fetching-scripts-perform-fetch">perform the fetch</a> given <var>request</var>, perform the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>cache</var> be the <var>moduleResponsesMap</var>.</p>
       <li data-md>
        <p>Let <var>url</var> be <var>request</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-url" id="ref-for-concept-request-url">url</a>.</p>
       <li data-md>
        <p>If <var>cache</var> contains an entry with key <var>url</var> whose value is "fetching", wait until that
entry’s value changes, then proceed to the next step.</p>
       <li data-md>
        <p>If <var>cache</var> contains an entry with key <var>url</var>, asynchronously complete this algorithm with
that entry’s value, and abort these steps.</p>
       <li data-md>
        <p>Create an entry in <var>cache</var> with key <var>url</var> and value "fetching".</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch①">Fetch</a> <var>request</var>.</p>
       <li data-md>
        <p>Let <var>response</var> be the result of <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch②">fetch</a> when it asynchronously completes.</p>
       <li data-md>
        <p>Set the value of the entry in <var>cache</var> whose key is <var>url</var> to <var>response</var>, and
asynchronously complete this algorithm with <var>response</var>.</p>
      </ol>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-module-worker-script-tree" id="ref-for-fetch-a-module-worker-script-tree①">fetch a module worker script graph</a> when it asynchronously completes.</p>
    </ol>
    <p class="note" role="note"><span>Note:</span> Specifically, if a script fails to parse or fails to load over the network, it will reject the
    promise. If the script throws an error while first evaluating the promise it will resolve as a
    classes may have been registered correctly.</p>
    <div class="example" id="example-98c1bf68">
     <a class="self-link" href="#example-98c1bf68"></a> When an author adds code into a <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet⑨">Worklet</a></code> the code may run against multiple <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②③">WorkletGlobalScope</a></code>s, for example: 
<pre class="lang-javascript highlight"><c- c1>// script.js</c->
console<c- p>.</c->log<c- p>(</c-><c- t>'Hello from a WorkletGlobalScope!'</c-><c- p>);</c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// main.js</c->
await CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'script.js'</c-><c- p>);</c->
</pre>
     <p>Behind the scenes the user agent may load the <code class="lang-javascript highlight">script<c- p>.</c->js</code> into 4 global scopes, in which case the debugging tools for the user agent would print:</p>
<pre class="lang-javascript highlight"><c- p>[</c->paintWorklet#<c- mi>1</c-><c- p>]</c-> Hello from a WorkletGlobalScope<c- o>!</c->
<c- p>[</c->paintWorklet#<c- mi>4</c-><c- p>]</c-> Hello from a WorkletGlobalScope<c- o>!</c->
<c- p>[</c->paintWorklet#<c- mi>2</c-><c- p>]</c-> Hello from a WorkletGlobalScope<c- o>!</c->
<c- p>[</c->paintWorklet#<c- mi>3</c-><c- p>]</c-> Hello from a WorkletGlobalScope<c- o>!</c->
</pre>
     <p>If the user agent decided to kill and restart a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②④">WorkletGlobalScope</a></code> number 3 in this example,
    it would print <code class="lang-javascript highlight"><c- p>[</c->paintWorklet#<c- mi>3</c-><c- p>]</c-> Hello from a
    WorkletGlobalScope<c- o>!</c-></code> again in the debugging tools when this occurs.</p>
    </div>
   </div>
   <p class="issue" id="issue-fed24f06"><a class="self-link" href="#issue-fed24f06"></a> Need ability to load code into a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②⑤">WorkletGlobalScope</a></code> declaratively. <a href="https://github.com/w3c/css-houdini-drafts/issues/47">&lt;https://github.com/w3c/css-houdini-drafts/issues/47></a></p>
   <h3 class="heading settled" data-level="2.3" id="lifetime-of-the-worklet"><span class="secno">2.3. </span><span class="content">Lifetime of the Worklet</span><a class="self-link" href="#lifetime-of-the-worklet"></a></h3>
   <p>The lifetime of a <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet①⓪">Worklet</a></code> is tied to the object it belongs to, for example the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code>.</p>
   <p>The lifetime of a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②⑥">WorkletGlobalScope</a></code> should be defined by subsequent specifications which
inherit from <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②⑦">WorkletGlobalScope</a></code>.</p>
   <p>Subsequent specifications <em>may</em> define that a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope②⑧">WorkletGlobalScope</a></code> can be terminated at any
time particularly if there are no pending operations, or detects abnormal operation such as infinite
loops and callbacks exceeding imposed time limits.</p>
   <h2 class="heading settled" data-level="3" id="security-considerations"><span class="secno">3. </span><span class="content">Security Considerations</span><a class="self-link" href="#security-considerations"></a></h2>
   <p class="issue" id="issue-94eacd79"><a class="self-link" href="#issue-94eacd79"></a> Need to decide if to allow worklets for unsecure context, etc. <a href="https://github.com/w3c/css-houdini-drafts/issues/92">&lt;https://github.com/w3c/css-houdini-drafts/issues/92></a></p>
   <h2 class="heading settled" data-level="4" id="examples"><span class="secno">4. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>For these examples we’ll use a fake worklet on window.</p>
   <div class="example" id="example-404ba410">
    <a class="self-link" href="#example-404ba410"></a> 
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <c- g>Window</c-> {
  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <c- n>Worklet</c-> <c- g>fakeWorklet1</c->;
  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <c- n>Worklet</c-> <c- g>fakeWorklet2</c->;
};
</pre>
<pre class="idl highlight def">[<c- g>Global</c->=(<c- n>Worklet</c->,<c- n>FakeWorklet</c->),<c- g>Exposed</c->=<c- n>FakeWorklet</c->]
<c- b>interface</c-> <c- g>FakeWorkletGlobalScope</c-> : <c- n>WorkletGlobalScope</c-> {
    <c- b>void</c-> <c- g>registerAnArbitaryClass</c->(<c- b>DOMString</c-> <c- g>type</c->, <c- n>Function</c-> <c- g>classConstructor</c->);
};
</pre>
    <p>Each <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/worklets-1/#fakeworkletglobalscope" id="ref-for-fakeworkletglobalscope">FakeWorkletGlobalScope</a></code> has a map of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="registered-class-constructors-map">registered class constructors map</dfn>.</p>
    <p>When the <dfn class="idl-code" data-dfn-for="FakeWorkletGlobalScope" data-dfn-type="method" data-export data-lt="registerAnArbitaryClass(type, classConstructor)" id="dom-fakeworkletglobalscope-registeranarbitaryclass"><code> registerAnArbitaryClass(<var>type</var>, <var>classConstructor</var>)</code><a class="self-link" href="#dom-fakeworkletglobalscope-registeranarbitaryclass"></a></dfn> method is called, the user agent will add
    the <var>classConstructor</var> of <var>type</var> to the map of <a data-link-type="dfn" href="#registered-class-constructors-map" id="ref-for-registered-class-constructors-map">registered class constructors map</a>.</p>
   </div>
   <h3 class="heading settled" data-level="4.1" id="example-single"><span class="secno">4.1. </span><span class="content">Loading scripts into a worklet.</span><a class="self-link" href="#example-single"></a></h3>
<pre class="lang-javascript highlight">window<c- p>.</c->fakeWorklet1<c- p>.</c->addModule<c- p>(</c-><c- t>'script1.js'</c-><c- p>);</c->
window<c- p>.</c->fakeWorklet1<c- p>.</c->addModule<c- p>(</c-><c- t>'script2.js'</c-><c- p>);</c->

<c- c1>// Assuming no other calls to fakeWorklet1 valid script loading orderings are:</c->
<c- c1>// 1. 'script1.js', 'script2.js'</c->
<c- c1>// 2. 'script2.js', 'script1.js'</c->
</pre>
   <h3 class="heading settled" data-level="4.2" id="example-multiple"><span class="secno">4.2. </span><span class="content">Loading scripts into multiple worklets.</span><a class="self-link" href="#example-multiple"></a></h3>
<pre class="lang-javascript highlight">Promise<c- p>.</c->all<c- p>([</c->
    window<c- p>.</c->fakeWorklet1<c- p>.</c->addModule<c- p>(</c-><c- t>'script1.js'</c-><c- p>),</c->
    window<c- p>.</c->fakeWorklet2<c- p>.</c->addModule<c- p>(</c-><c- t>'script2.js'</c-><c- p>)</c->
<c- p>]).</c->then<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c->
    <c- c1>// Both scripts now have loaded code, can do a task which relies on this.</c->
<c- p>});</c->
</pre>
   <h3 class="heading settled" data-level="4.3" id="example-class"><span class="secno">4.3. </span><span class="content">Create a registered class and invoke a method.</span><a class="self-link" href="#example-class"></a></h3>
<pre class="lang-javascript highlight"><c- c1>// Inside FakeWorkletGlobalScope</c->
registerAnArbitaryClass<c- p>(</c-><c- t>'key'</c-><c- p>,</c-> <c- kr>class</c-> FooClass <c- p>{</c->
    process<c- p>(</c->arg<c- p>)</c-> <c- p>{</c->
        <c- k>return</c-> <c- o>!</c->arg<c- p>;</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   <p>As an example, if the user agent wants to invoke "process" on a new class instance, the user agent
could follow the following steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>workletGlobalScope</var> be a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/worklets-1/#fakeworkletglobalscope" id="ref-for-fakeworkletglobalscope①">FakeWorkletGlobalScope</a></code> from the list of <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes④">worklet’s
WorkletGlobalScopes</a> from the fake <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet①①">Worklet</a></code>.</p>
     <p>The user agent <em>may</em> also <a data-link-type="dfn" href="#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope③">create a WorkletGlobalScope</a> given the fake <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet①②">Worklet</a></code> and use that.</p>
    <li data-md>
     <p>Let <var>classCtor</var> be the result of performing a lookup in <a data-link-type="dfn" href="#registered-class-constructors-map" id="ref-for-registered-class-constructors-map①">registered class constructors
map</a> with "key" as the key.</p>
    <li data-md>
     <p>Let <var>classInstance</var> be the result of <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-construct" id="ref-for-sec-construct">Construct</a>(<var>classCtor</var>).</p>
    <li data-md>
     <p>Let <var>result</var> be the result of <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-invoke" id="ref-for-sec-invoke">Invoke</a>(O=<var>classInstance</var>, P="process",
Arguments=["true"]).</p>
    <li data-md>
     <p>Return <var>result</var>.</p>
   </ol>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-worklet-addmodule">addModule(moduleURL)</a><span>, in §2.2</span>
   <li><a href="#dom-worklet-addmodule">addModule(moduleURL, options)</a><span>, in §2.2</span>
   <li><a href="#pending-tasks-struct-counter">counter</a><span>, in §2.2</span>
   <li><a href="#create-a-workletglobalscope">create a WorkletGlobalScope</a><span>, in §2.1.2</span>
   <li><a href="#dom-workletoptions-credentials">credentials</a><span>, in §2.2</span>
   <li><a href="#fetch-and-invoke-a-worklet-script">fetch and invoke a worklet script</a><span>, in §2.2</span>
   <li><a href="#fetch-a-worklet-script">fetch a worklet script</a><span>, in §2.2</span>
   <li><a href="#workletglobalscope-module-map">module map</a><span>, in §2.1</span>
   <li><a href="#module-responses-map">module responses map</a><span>, in §2.2</span>
   <li><a href="#workletglobalscope-owner-document">owner document</a><span>, in §2.1</span>
   <li><a href="#pending-tasks-struct">pending tasks struct</a><span>, in §2.2</span>
   <li><a href="#dom-fakeworkletglobalscope-registeranarbitaryclass">registerAnArbitaryClass(type, classConstructor)</a><span>, in §4</span>
   <li><a href="#registered-class-constructors-map">registered class constructors map</a><span>, in §4</span>
   <li><a href="#set-up-a-worklet-environment-settings-object">set up a worklet environment settings object</a><span>, in §2.1.3</span>
   <li><a href="#worklet">Worklet</a><span>, in §2.2</span>
   <li><a href="#workletglobalscope">WorkletGlobalScope</a><span>, in §2.1</span>
   <li><a href="#worklet-global-scope">worklet global scope</a><span>, in §2.1</span>
   <li><a href="#worklet-global-scope-execution-environment">worklet global scope execution environment</a><span>, in §2.1</span>
   <li><a href="#worklet-global-scope-type">worklet global scope type</a><span>, in §2.2</span>
   <li><a href="#dictdef-workletoptions">WorkletOptions</a><span>, in §2.2</span>
   <li><a href="#worklets-workletglobalscopes">worklet’s WorkletGlobalScopes</a><span>, in §2.2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-paintworkletglobalscope">
   <a href="https://drafts.css-houdini.org/css-paint-api-1/#paintworkletglobalscope">https://drafts.css-houdini.org/css-paint-api-1/#paintworkletglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paintworkletglobalscope">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-parse-something-according-to-a-css-grammar">
   <a href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar">https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-parse-something-according-to-a-css-grammar">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-utf-8">
   <a href="https://encoding.spec.whatwg.org/#utf-8">https://encoding.spec.whatwg.org/#utf-8</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-utf-8">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-requestcredentials">
   <a href="https://fetch.spec.whatwg.org/#requestcredentials">https://fetch.spec.whatwg.org/#requestcredentials</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-requestcredentials">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-fetch">
   <a href="https://fetch.spec.whatwg.org/#concept-fetch">https://fetch.spec.whatwg.org/#concept-fetch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-fetch">2.2. Worklet</a> <a href="#ref-for-concept-fetch①">(2)</a> <a href="#ref-for-concept-fetch②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-request-url">
   <a href="https://fetch.spec.whatwg.org/#concept-request-url">https://fetch.spec.whatwg.org/#concept-request-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-request-url">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dedicatedworkerglobalscope">
   <a href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope">https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dedicatedworkerglobalscope">1.2. Code Idempotency</a>
    <li><a href="#ref-for-dedicatedworkerglobalscope①">2.1. The Global Scope</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-document">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#dom-document">https://html.spec.whatwg.org/multipage/infrastructure.html#dom-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document">2.1. The Global Scope</a> <a href="#ref-for-dom-document①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">2.3. Lifetime of the Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-environment-active-service-worker">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-active-service-worker">https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-active-service-worker</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-environment-active-service-worker">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-api-base-url">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url">https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-api-base-url">2.1.3. Script settings for worklets</a> <a href="#ref-for-api-base-url①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-api-url-character-encoding">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#api-url-character-encoding">https://html.spec.whatwg.org/multipage/webappapis.html#api-url-character-encoding</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-api-url-character-encoding">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context">2.1.1. The event loop</a>
    <li><a href="#ref-for-browsing-context①">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-environment-creation-url">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-creation-url">https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-creation-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-environment-creation-url">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-environment-settings-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object">https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-environment-settings-object">2.1. The Global Scope</a>
    <li><a href="#ref-for-environment-settings-object①">2.1.3. Script settings for worklets</a>
    <li><a href="#ref-for-environment-settings-object②">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-script-error-to-rethrow">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-script-error-to-rethrow">https://html.spec.whatwg.org/multipage/webappapis.html#concept-script-error-to-rethrow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-script-error-to-rethrow">2.2. Worklet</a> <a href="#ref-for-concept-script-error-to-rethrow①">(2)</a> <a href="#ref-for-concept-script-error-to-rethrow②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-loop">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">https://html.spec.whatwg.org/multipage/webappapis.html#event-loop</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-loop">2.1.1. The event loop</a> <a href="#ref-for-event-loop①">(2)</a> <a href="#ref-for-event-loop②">(3)</a> <a href="#ref-for-event-loop③">(4)</a> <a href="#ref-for-event-loop④">(5)</a>
    <li><a href="#ref-for-event-loop⑤">2.1.3. Script settings for worklets</a> <a href="#ref-for-event-loop⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fetch-a-module-worker-script-tree">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-module-worker-script-tree">https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-module-worker-script-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fetch-a-module-worker-script-tree">2.2. Worklet</a> <a href="#ref-for-fetch-a-module-worker-script-tree①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-settings-object-global">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-global">https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-global</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-settings-object-global">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-https-state">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#https-state">https://html.spec.whatwg.org/multipage/webappapis.html#https-state</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-https-state">2.1.3. Script settings for worklets</a> <a href="#ref-for-https-state①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-environment-id">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-id">https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-id</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-environment-id">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-microtask">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#microtask">https://html.spec.whatwg.org/multipage/webappapis.html#microtask</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-microtask">2.1.1. The event loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-module-script">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#module-script">https://html.spec.whatwg.org/multipage/webappapis.html#module-script</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-module-script">1.2. Code Idempotency</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-origin-opaque">
   <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin-opaque">https://html.spec.whatwg.org/multipage/origin.html#concept-origin-opaque</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-origin-opaque">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-settings-object-origin">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin">https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-settings-object-origin">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fetching-scripts-perform-fetch">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#fetching-scripts-perform-fetch">https://html.spec.whatwg.org/multipage/webappapis.html#fetching-scripts-perform-fetch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fetching-scripts-perform-fetch">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">2.2. Worklet</a> <a href="#ref-for-queue-a-task①">(2)</a> <a href="#ref-for-queue-a-task②">(3)</a> <a href="#ref-for-queue-a-task③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-realm-execution-context">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#realm-execution-context">https://html.spec.whatwg.org/multipage/webappapis.html#realm-execution-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-realm-execution-context">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-settings-object-referrer-policy">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-referrer-policy">https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-referrer-policy</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-settings-object-referrer-policy">2.1.3. Script settings for worklets</a> <a href="#ref-for-concept-settings-object-referrer-policy①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-relevant-settings-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object">https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relevant-settings-object">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-report-the-exception">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception">https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-report-the-exception">2.1. The Global Scope</a> <a href="#ref-for-report-the-exception①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-responsible-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context">https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-responsible-browsing-context">2.1.3. Script settings for worklets</a> <a href="#ref-for-responsible-browsing-context①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-responsible-document">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document">https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-responsible-document">2.1.2. Creating a WorkletGlobalScope</a>
    <li><a href="#ref-for-responsible-document①">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-responsible-event-loop">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop">https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-responsible-event-loop">2.1.2. Creating a WorkletGlobalScope</a>
    <li><a href="#ref-for-responsible-event-loop①">2.1.3. Script settings for worklets</a> <a href="#ref-for-responsible-event-loop②">(2)</a>
    <li><a href="#ref-for-responsible-event-loop③">2.2. Worklet</a> <a href="#ref-for-responsible-event-loop④">(2)</a> <a href="#ref-for-responsible-event-loop⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-run-a-module-script">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#run-a-module-script">https://html.spec.whatwg.org/multipage/webappapis.html#run-a-module-script</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-run-a-module-script">2.1.2. Creating a WorkletGlobalScope</a>
    <li><a href="#ref-for-run-a-module-script①">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-environment-target-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-target-browsing-context">https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-target-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-environment-target-browsing-context">2.1.3. Script settings for worklets</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-workers">
   <a href="https://html.spec.whatwg.org/multipage/workers.html#workers">https://html.spec.whatwg.org/multipage/workers.html#workers</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workers">1.1. Motivations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-struct">
   <a href="https://infra.spec.whatwg.org/#struct">https://infra.spec.whatwg.org/#struct</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-struct">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-a-new-promise">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise">https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-a-new-promise">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-aborterror">
   <a href="https://heycam.github.io/webidl/#aborterror">https://heycam.github.io/webidl/#aborterror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-aborterror">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">2.2. Worklet</a> <a href="#ref-for-idl-DOMException①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2.1. The Global Scope</a>
    <li><a href="#ref-for-Exposed①">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-NewObject">
   <a href="https://heycam.github.io/webidl/#NewObject">https://heycam.github.io/webidl/#NewObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-NewObject">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-syntaxerror">
   <a href="https://heycam.github.io/webidl/#syntaxerror">https://heycam.github.io/webidl/#syntaxerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntaxerror">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-USVString">
   <a href="https://heycam.github.io/webidl/#idl-USVString">https://heycam.github.io/webidl/#idl-USVString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-USVString">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-inherit">
   <a href="https://heycam.github.io/webidl/#dfn-inherit">https://heycam.github.io/webidl/#dfn-inherit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-inherit">2.2. Worklet</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-paint-api-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-paintworkletglobalscope" style="color:initial">PaintWorkletGlobalScope</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-css-parse-something-according-to-a-css-grammar" style="color:initial">parse</span>
    </ul>
   <li>
    <a data-link-type="biblio">[ENCODING]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-utf-8" style="color:initial">utf-8</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FETCH]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-requestcredentials" style="color:initial">RequestCredentials</span>
     <li><span class="dfn-paneled" id="term-for-concept-fetch" style="color:initial">fetch</span>
     <li><span class="dfn-paneled" id="term-for-concept-request-url" style="color:initial">url</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dedicatedworkerglobalscope" style="color:initial">DedicatedWorkerGlobalScope</span>
     <li><span class="dfn-paneled" id="term-for-dom-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-concept-environment-active-service-worker" style="color:initial">active service worker</span>
     <li><span class="dfn-paneled" id="term-for-api-base-url" style="color:initial">api base url</span>
     <li><span class="dfn-paneled" id="term-for-api-url-character-encoding" style="color:initial">api url character encoding</span>
     <li><span class="dfn-paneled" id="term-for-browsing-context" style="color:initial">browsing context</span>
     <li><span class="dfn-paneled" id="term-for-concept-environment-creation-url" style="color:initial">creation url</span>
     <li><span class="dfn-paneled" id="term-for-environment-settings-object" style="color:initial">environment settings object</span>
     <li><span class="dfn-paneled" id="term-for-concept-script-error-to-rethrow" style="color:initial">error to rethrow</span>
     <li><span class="dfn-paneled" id="term-for-event-loop" style="color:initial">event loop</span>
     <li><span class="dfn-paneled" id="term-for-fetch-a-module-worker-script-tree" style="color:initial">fetch a module worker script graph</span>
     <li><span class="dfn-paneled" id="term-for-concept-settings-object-global" style="color:initial">global object</span>
     <li><span class="dfn-paneled" id="term-for-https-state" style="color:initial">https state</span>
     <li><span class="dfn-paneled" id="term-for-concept-environment-id" style="color:initial">id</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-microtask" style="color:initial">microtask</span>
     <li><span class="dfn-paneled" id="term-for-module-script" style="color:initial">module script</span>
     <li><span class="dfn-paneled" id="term-for-concept-origin-opaque" style="color:initial">opaque origin</span>
     <li><span class="dfn-paneled" id="term-for-concept-settings-object-origin" style="color:initial">origin</span>
     <li><span class="dfn-paneled" id="term-for-fetching-scripts-perform-fetch" style="color:initial">perform the fetch</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-realm-execution-context" style="color:initial">realm execution context</span>
     <li><span class="dfn-paneled" id="term-for-concept-settings-object-referrer-policy" style="color:initial">referrer policy</span>
     <li><span class="dfn-paneled" id="term-for-relevant-settings-object" style="color:initial">relevant settings object</span>
     <li><span class="dfn-paneled" id="term-for-report-the-exception" style="color:initial">report an exception</span>
     <li><span class="dfn-paneled" id="term-for-responsible-browsing-context" style="color:initial">responsible browsing context</span>
     <li><span class="dfn-paneled" id="term-for-responsible-document" style="color:initial">responsible document</span>
     <li><span class="dfn-paneled" id="term-for-responsible-event-loop" style="color:initial">responsible event loop</span>
     <li><span class="dfn-paneled" id="term-for-run-a-module-script" style="color:initial">run a module script</span>
     <li><span class="dfn-paneled" id="term-for-concept-environment-target-browsing-context" style="color:initial">target browsing context</span>
     <li><span class="dfn-paneled" id="term-for-workers" style="color:initial">web worker</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-struct" style="color:initial">struct</span>
    </ul>
   <li>
    <a data-link-type="biblio">[promises-guide]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-a-new-promise" style="color:initial">a new promise</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-aborterror" style="color:initial">AbortError</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-NewObject" style="color:initial">NewObject</span>
     <li><span class="dfn-paneled" id="term-for-syntaxerror" style="color:initial">SyntaxError</span>
     <li><span class="dfn-paneled" id="term-for-idl-USVString" style="color:initial">USVString</span>
     <li><span class="dfn-paneled" id="term-for-dfn-inherit" style="color:initial">inherit</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-encoding">[ENCODING]
   <dd>Anne van Kesteren. <a href="https://encoding.spec.whatwg.org/">Encoding Standard</a>. Living Standard. URL: <a href="https://encoding.spec.whatwg.org/">https://encoding.spec.whatwg.org/</a>
   <dt id="biblio-fetch">[FETCH]
   <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-promises-guide">[PROMISES-GUIDE]
   <dd>Domenic Denicola. <a href="https://www.w3.org/2001/tag/doc/promises-guide">Writing Promise-Using Specifications</a>. 9 November 2018. TAG Finding. URL: <a href="https://www.w3.org/2001/tag/doc/promises-guide">https://www.w3.org/2001/tag/doc/promises-guide</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-paint-api-1">[CSS-PAINT-API-1]
   <dd>Ian Kilpatrick; Dean Jackson. <a href="https://www.w3.org/TR/css-paint-api-1/">CSS Painting API Level 1</a>. 9 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-paint-api-1/">https://www.w3.org/TR/css-paint-api-1/</a>
   <dt id="biblio-webaudio">[WEBAUDIO]
   <dd>Paul Adenot; Raymond Toy. <a href="https://www.w3.org/TR/webaudio/">Web Audio API</a>. 18 September 2018. CR. URL: <a href="https://www.w3.org/TR/webaudio/">https://www.w3.org/TR/webaudio/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Worklet</c->]
<c- b>interface</c-> <a href="#workletglobalscope"><code><c- g>WorkletGlobalScope</c-></code></a> {
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#worklet"><code><c- g>Worklet</c-></code></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①"><c- g>NewObject</c-></a>] <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-worklet-addmodule" id="ref-for-dom-worklet-addmodule①①"><c- g>addModule</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString①"><c- b>USVString</c-></a> <a href="#dom-worklet-addmodule-moduleurl-options-moduleurl"><code><c- g>moduleURL</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-workletoptions" id="ref-for-dictdef-workletoptions①"><c- n>WorkletOptions</c-></a> <a href="#dom-worklet-addmodule-moduleurl-options-options"><code><c- g>options</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-workletoptions"><code><c- g>WorkletOptions</c-></code></a> {
    <a class="n" data-link-type="idl-name" href="https://fetch.spec.whatwg.org/#requestcredentials" id="ref-for-requestcredentials①"><c- n>RequestCredentials</c-></a> <a data-default="&quot;same-origin&quot;" data-type="RequestCredentials " href="#dom-workletoptions-credentials"><code><c- g>credentials</c-></code></a> = "same-origin";
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> HTML’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception">report an exception</a> needs updating to work with
    non-EventTarget global objects. <a href="https://github.com/whatwg/html/issues/2611">&lt;https://github.com/whatwg/html/issues/2611></a><a href="#issue-b929d849"> ↵ </a></div>
   <div class="issue"> Merge this with https://html.spec.whatwg.org/multipage/workers.html#set-up-a-worker-environment-settings-object<a href="#issue-a1972cc8"> ↵ </a></div>
   <div class="issue"> Need ability to load code into a <code class="idl"><a data-link-type="idl" href="#workletglobalscope">WorkletGlobalScope</a></code> declaratively. <a href="https://github.com/w3c/css-houdini-drafts/issues/47">&lt;https://github.com/w3c/css-houdini-drafts/issues/47></a><a href="#issue-fed24f06"> ↵ </a></div>
   <div class="issue"> Need to decide if to allow worklets for unsecure context, etc. <a href="https://github.com/w3c/css-houdini-drafts/issues/92">&lt;https://github.com/w3c/css-houdini-drafts/issues/92></a><a href="#issue-94eacd79"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="workletglobalscope">
   <b><a href="#workletglobalscope">#workletglobalscope</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletglobalscope">1.2. Code Idempotency</a> <a href="#ref-for-workletglobalscope①">(2)</a>
    <li><a href="#ref-for-workletglobalscope②">2.1. The Global Scope</a> <a href="#ref-for-workletglobalscope③">(2)</a> <a href="#ref-for-workletglobalscope④">(3)</a> <a href="#ref-for-workletglobalscope⑤">(4)</a> <a href="#ref-for-workletglobalscope⑥">(5)</a> <a href="#ref-for-workletglobalscope⑦">(6)</a> <a href="#ref-for-workletglobalscope⑧">(7)</a> <a href="#ref-for-workletglobalscope⑨">(8)</a>
    <li><a href="#ref-for-workletglobalscope①⓪">2.1.1. The event loop</a>
    <li><a href="#ref-for-workletglobalscope①①">2.2. Worklet</a> <a href="#ref-for-workletglobalscope①②">(2)</a> <a href="#ref-for-workletglobalscope①③">(3)</a> <a href="#ref-for-workletglobalscope①④">(4)</a> <a href="#ref-for-workletglobalscope①⑤">(5)</a> <a href="#ref-for-workletglobalscope①⑥">(6)</a> <a href="#ref-for-workletglobalscope①⑦">(7)</a> <a href="#ref-for-workletglobalscope①⑧">(8)</a> <a href="#ref-for-workletglobalscope①⑨">(9)</a> <a href="#ref-for-workletglobalscope②⓪">(10)</a> <a href="#ref-for-workletglobalscope②①">(11)</a> <a href="#ref-for-workletglobalscope②②">(12)</a> <a href="#ref-for-workletglobalscope②③">(13)</a> <a href="#ref-for-workletglobalscope②④">(14)</a> <a href="#ref-for-workletglobalscope②⑤">(15)</a>
    <li><a href="#ref-for-workletglobalscope②⑥">2.3. Lifetime of the Worklet</a> <a href="#ref-for-workletglobalscope②⑦">(2)</a> <a href="#ref-for-workletglobalscope②⑧">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="workletglobalscope-owner-document">
   <b><a href="#workletglobalscope-owner-document">#workletglobalscope-owner-document</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletglobalscope-owner-document">2.1. The Global Scope</a> <a href="#ref-for-workletglobalscope-owner-document①">(2)</a>
    <li><a href="#ref-for-workletglobalscope-owner-document②">2.1.2. Creating a WorkletGlobalScope</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="workletglobalscope-module-map">
   <b><a href="#workletglobalscope-module-map">#workletglobalscope-module-map</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletglobalscope-module-map">2.1. The Global Scope</a>
    <li><a href="#ref-for-workletglobalscope-module-map①">2.1.3. Script settings for worklets</a> <a href="#ref-for-workletglobalscope-module-map②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="worklet-global-scope-execution-environment">
   <b><a href="#worklet-global-scope-execution-environment">#worklet-global-scope-execution-environment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet-global-scope-execution-environment">2.1.1. The event loop</a>
    <li><a href="#ref-for-worklet-global-scope-execution-environment①">2.1.2. Creating a WorkletGlobalScope</a>
    <li><a href="#ref-for-worklet-global-scope-execution-environment②">2.2. Worklet</a> <a href="#ref-for-worklet-global-scope-execution-environment③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-workletglobalscope">
   <b><a href="#create-a-workletglobalscope">#create-a-workletglobalscope</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-workletglobalscope">2.1. The Global Scope</a>
    <li><a href="#ref-for-create-a-workletglobalscope①">2.1.1. The event loop</a>
    <li><a href="#ref-for-create-a-workletglobalscope②">2.2. Worklet</a>
    <li><a href="#ref-for-create-a-workletglobalscope③">4.3. Create a registered class and invoke a method.</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-up-a-worklet-environment-settings-object">
   <b><a href="#set-up-a-worklet-environment-settings-object">#set-up-a-worklet-environment-settings-object</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-up-a-worklet-environment-settings-object">2.1.2. Creating a WorkletGlobalScope</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="worklet">
   <b><a href="#worklet">#worklet</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet">1.2. Code Idempotency</a>
    <li><a href="#ref-for-worklet①">2.1. The Global Scope</a> <a href="#ref-for-worklet②">(2)</a>
    <li><a href="#ref-for-worklet③">2.2. Worklet</a> <a href="#ref-for-worklet④">(2)</a> <a href="#ref-for-worklet⑤">(3)</a> <a href="#ref-for-worklet⑥">(4)</a> <a href="#ref-for-worklet⑦">(5)</a> <a href="#ref-for-worklet⑧">(6)</a> <a href="#ref-for-worklet⑨">(7)</a>
    <li><a href="#ref-for-worklet①⓪">2.3. Lifetime of the Worklet</a>
    <li><a href="#ref-for-worklet①①">4.3. Create a registered class and invoke a method.</a> <a href="#ref-for-worklet①②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-workletoptions">
   <b><a href="#dictdef-workletoptions">#dictdef-workletoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-workletoptions">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-workletoptions-credentials">
   <b><a href="#dom-workletoptions-credentials">#dom-workletoptions-credentials</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-workletoptions-credentials">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="worklet-global-scope-type">
   <b><a href="#worklet-global-scope-type">#worklet-global-scope-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet-global-scope-type">2.2. Worklet</a> <a href="#ref-for-worklet-global-scope-type①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="worklets-workletglobalscopes">
   <b><a href="#worklets-workletglobalscopes">#worklets-workletglobalscopes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklets-workletglobalscopes">2.2. Worklet</a> <a href="#ref-for-worklets-workletglobalscopes①">(2)</a> <a href="#ref-for-worklets-workletglobalscopes②">(3)</a> <a href="#ref-for-worklets-workletglobalscopes③">(4)</a>
    <li><a href="#ref-for-worklets-workletglobalscopes④">4.3. Create a registered class and invoke a method.</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="module-responses-map">
   <b><a href="#module-responses-map">#module-responses-map</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-module-responses-map">2.1.2. Creating a WorkletGlobalScope</a>
    <li><a href="#ref-for-module-responses-map①">2.2. Worklet</a> <a href="#ref-for-module-responses-map②">(2)</a> <a href="#ref-for-module-responses-map③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pending-tasks-struct">
   <b><a href="#pending-tasks-struct">#pending-tasks-struct</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-tasks-struct">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pending-tasks-struct-counter">
   <b><a href="#pending-tasks-struct-counter">#pending-tasks-struct-counter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-tasks-struct-counter">2.2. Worklet</a> <a href="#ref-for-pending-tasks-struct-counter①">(2)</a> <a href="#ref-for-pending-tasks-struct-counter②">(3)</a> <a href="#ref-for-pending-tasks-struct-counter③">(4)</a> <a href="#ref-for-pending-tasks-struct-counter④">(5)</a> <a href="#ref-for-pending-tasks-struct-counter⑤">(6)</a> <a href="#ref-for-pending-tasks-struct-counter⑥">(7)</a> <a href="#ref-for-pending-tasks-struct-counter⑦">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-worklet-addmodule">
   <b><a href="#dom-worklet-addmodule">#dom-worklet-addmodule</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-worklet-addmodule">2.1.1. The event loop</a>
    <li><a href="#ref-for-dom-worklet-addmodule①">2.2. Worklet</a> <a href="#ref-for-dom-worklet-addmodule②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fetch-and-invoke-a-worklet-script">
   <b><a href="#fetch-and-invoke-a-worklet-script">#fetch-and-invoke-a-worklet-script</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fetch-and-invoke-a-worklet-script">2.2. Worklet</a> <a href="#ref-for-fetch-and-invoke-a-worklet-script①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fetch-a-worklet-script">
   <b><a href="#fetch-a-worklet-script">#fetch-a-worklet-script</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fetch-a-worklet-script">2.1.2. Creating a WorkletGlobalScope</a> <a href="#ref-for-fetch-a-worklet-script①">(2)</a>
    <li><a href="#ref-for-fetch-a-worklet-script②">2.2. Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="registered-class-constructors-map">
   <b><a href="#registered-class-constructors-map">#registered-class-constructors-map</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-registered-class-constructors-map">4. Examples</a>
    <li><a href="#ref-for-registered-class-constructors-map①">4.3. Create a registered class and invoke a method.</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>